<template>
	<view>
		<view class="box">
			<view class="box-top">
				<view style="width: 100%;height: 1rpx;"></view>
				<view class="box-top-top">
					<image src="https://yhflsyz.oss-cn-guangzhou.aliyuncs.com/shop/Group%205568%402x.png" mode="" style="width: 52rpx;height: 52rpx;"></image>
					<view class="box-top-sp">
						等待商家处理
					</view>
				</view>
				<view class="box-top-main">
					商家将在24小时内处理，请您耐心等候~
				</view>
				<view class="box-top-bottom">
					<view class="box-box">
						<view class="box-top-bottom-sp">
							退款金额
						</view>
						<view class="box-top-bottom-num">
							￥68.00
						</view>
					</view>
				</view>
			</view>
			
			<view class="box-main">
				<view style="width: 100%;height: 1rpx;"></view>
					<view class="box-main-top">
						退款流程
					</view>
					<view class="box-main-bottom" style="margin-left: 10rpx;">
						<u-time-line >
							<u-time-line-item nodeTop="2">
								<!-- 此处自定义了左边内容，用一个图标替代 -->
								<template v-slot:node>
									
										<!-- 此处为uView的icon组件 -->
										<u-icon name="clock" color="#36BE6A" :size="24"></u-icon>
									
								</template>
								<template v-slot:content>
									<view>
										<view class="u-order-title" style="font-size: 32rpx;color: #36BE6A;font-weight: bold;">请等待商家处理 <text></text></view>
										<view class="u-order-desc" style="font-size: 24rpx;color: #666666;">您已成功发起退款申请，请耐心等待商家处理。</view>
										
									</view>
								</template>
							</u-time-line-item>
							<u-time-line-item>
								<!-- 此处没有自定义左边的内容，会默认显示一个点 -->
								<template v-slot:content>
									<view>
										<view class="u-order-desc" style="font-size: 28rpx;color: #8D8D8D;font-weight: bold;">退款成功</view>
									</view>
								</template>
							</u-time-line-item>
						</u-time-line>
					</view>
			</view>
			
			<view class="box-bottom">
				<view style="width: 100%;height: 1rpx;"></view>
				<view class="box-bottom-title">
					商品信息
				</view>
					<view class="store-main">
						<image :src="data.goods.image" mode="" style="width: 144rpx;height: 144rpx;"></image>
						<view class="store-right">
							<view class="right-top">
								{{data.goods.title}}
							</view>
							<view class="right-center">
								{{data.goods.difference}}
							</view>
							<view class="right-money">
								<text style="font-size: 24rpx;">￥</text>{{data.goods.freight_price}}
							</view>
						</view>
					</view>
					<view class="box-bottom-sp">
						<view class="box-bottom-sp-title">
							退款退货原因
						</view>
						<view class="box-bottom-sp-title1" style="color: #192524;">
							{{data.type==0?'不喜欢/不想要':data.type==1?'空包裹/坏包裹':data.type==2?'未送达/物流太慢':data.type==3?'颜色/尺码不符合':data.type==4?'质量有问题':data.type==5?'少件/漏发':'盗版/假冒品牌'}}
						</view>
					</view>
					<view class="box-bottom-sp">
						<view class="box-bottom-sp-title">
							退款件数
						</view>
						<view class="box-bottom-sp-title1" style="color: #192524;">
							{{data.goods_number}}
						</view>
					</view>
				
			</view>
		</view>
		<view class="btn">
			<view style="width: 40%;"></view>
			<view class="btn1">
				<view class="btn1-1" @click="closeRefund">
					撤销申请
				</view>
				<view class="btn1-1 btn1-2">
					修改申请
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				data:{},
				id:''
			}
		},
		onLoad(option) {
			console.log(option);
			this.id = option.id
			this.$u.api.shop.getRefundInfo({id:option.id}).then(res =>{
				if(res.code == 1){
					this.data = res.data
				}
			})
		},
		methods:{
			closeRefund(){
				this.$u.api.shop.closeRefund({id:this.id}).then(res =>{
					if(res.code == 1){
						uni.navigateBack({})
					}
				})
			}
				
		}
	}
</script>

<style scoped lang="scss">
	.btn{
		width: 750rpx;
		height: 116rpx;
		position: fixed;
		bottom: 0;
		display: flex;
		background-color: white;
	}
	.btn1-1{
		width: 184rpx;
		height: 84rpx;
		border-radius: 42rpx;
		font-size: 28rpx;
		color: #323232;
		border: 1rpx solid #323232;
		text-align: center;
		line-height: 84rpx;
	}
	.btn1-2{
		color: #36BE6A;
		border: 1rpx solid #36BE6A;
		margin-left: 35rpx;
	}
	.btn1{
		width: 60%;
		height: 100%;
		display: flex;
		align-items: center;
	}
	.box{
		width: 690rpx;
		height: 956rpx;
		background-color: white;
		border-radius: 16rpx;
		margin-top: 20rpx;
		margin-left: 30rpx;
	}
	.box-top{
		width: 630rpx;
		height: 284rpx;
		margin-left: 30rpx;
		border-bottom: 1rpx solid #EEEEEE;
	}
	.box-top-top{
		width: 100%;
		height: 52rpx;
		margin-top: 28rpx;
		display: flex;
		align-items: center;
	}
	.box-top-sp{
		width: 282rpx;
		margin-left: 8rpx;
		height: 48rpx;
		line-height: 48rpx;
		font-size: 44rpx;
		color: #192524;
		font-weight: bold;
	}
	.box-top-main{
		width: 100%;
		height: 24rpx;
		font-size: 28rpx;
		color: #666666;
		line-height: 24rpx;
		margin-top: 20rpx;
	}
	.box-top-bottom{
		width: 630rpx;
		height: 96rpx;
		margin-top: 26rpx;
		background-color: #F9F9F9;
		border-radius: 12rpx;
	}
	.box-box{
		width: 570rpx;
		height: 96rpx;
		margin-left: 30rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		font-size: 28rpx;
		color: #3A3A3A;
		font-weight: bold;
	}
	.box-main{
		width: 630rpx;
		height: 296rpx;
		margin-left: 30rpx;
		border-bottom: 1rpx solid #EEEEEE;
	}
	.box-main-top{
		width: 100%;
		height: 32rpx;
		font-size: 32rpx;
		font-weight: bold;
		color: #192524;
		line-height: 32rpx;
		margin-top: 43rpx;
	}
	.box-main-bottom{
		margin-top: 28rpx;
	}
	.box-bottom{
		width: 630rpx;
		height: 376rpx;
		margin-left: 30rpx;
	}
	.box-bottom-title{
		width: 100%;
		height: 32rpx;
		font-size: 32rpx;
		font-weight: bold;
		line-height: 32rpx;
		margin-top: 47rpx;
		color: #192524;
	}
	.store-main{
		width: 630rpx;
		height: 144rpx;
		display: flex;
		justify-content: space-between;
		margin-top: 39rpx;
	}
	.store-right{
		width: 474rpx;
		height: 144rpx;
		position: relative;
		/* background-color: skyblue; */
	}
	.right-top{
		width: 100%;
		height: 28rpx;
		line-height: 28rpx;
		font-size: 28rpx;
		color: black;
		overflow:hidden;
		 white-space: nowrap;
		 text-overflow: ellipsis;
		 -o-text-overflow:ellipsis;
	}
	.right-center{
		width: 100%;
		height: 20rpx;
		line-height: 24rpx;
		font-size: 24rpx;
		color: #888888;
		margin-top: 20rpx;
	}
	.right-money{
		min-width: 130rpx;
		height: 28rpx;
		font-size: 36rpx;
		color: #192524;
		position: absolute;
		bottom: 5rpx;
		line-height: 28rpx;
	}
	.right-num{
		width: 170rpx;
		height: 44rpx;
		position: absolute;
		bottom: 0rpx;
		right: 30rpx;
	}
	.box-bottom-sp{
		width: 100%;
		height: 24rpx;
		font-size: 24rpx;
		color: #999999;
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-top: 24rpx;
	}
</style>